<template>
  <view class="login-container">
    <view class="mainBg"></view>
    <view class="container">
      <view class="main-head">
        <text class="head-text-one">Hello!</text>
        <text class="head-text-two">欢迎使用烧创伤微生态计划</text>
      </view>
      <view class="login-form">
        <input
          class="login-form-input"
          type="text"
					v-model="username"
          placeholder="请输入用户名"
        />
        <input
          class="login-form-input"
          type="password"
					v-model="password"
          placeholder="请输入密码"
        />
        <view class="login-form-ope">
          <label class="remember-me">
            <checkbox-group @change="toggleRemember">
              <checkbox :checked="rememberMe" color="#007AFF" />
              <text>记住密码</text>
            </checkbox-group>
          </label>
          <text class="forgot-password" @click="navigateToForgot"
            >忘记密码</text
          >
        </view>
      </view>
      <view class="login-ope" @click="handleLogin">登录</view>
      <view class="register"> 还没有账号？<text @click="navigateToRegister">立即注册</text> </view>
    </view>
    <view class="isAgree">
      登录即代表您已阅读并同意《<text>用户协议</text>》和《<text>隐私政策</text>》
    </view>
    <!-- <view class="logo-container">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="app-name">烧创伤微生态计划</text>
		</view>

		<view class="form-container">
			<view class="input-group">
				<text class="input-label">用户名</text>
				<input
					class="input"
					type="text"
					placeholder="请输入用户名"
					v-model="username"
					placeholder-class="input-placeholder"
					/>
			</view>

			<view class="input-group">
				<text class="input-label">密码</text>
				<input
					class="input"
					type="password"
					placeholder="请输入密码"
					v-model="password"
					placeholder-class="input-placeholder"
					/>
			</view>

			<view class="remember-forgot">
				<label class="remember-me">
					<checkbox-group @change="toggleRemember">
					<checkbox :checked="rememberMe" color="#007AFF" />
					<text>记住我</text>
					</checkbox-group>
				</label>
				<text class="forgot-password" @click="navigateToForgot">忘记密码?</text>
			</view>

			<button
				class="login-btn"
				:disabled="!canLogin"
				:class="{ 'disabled-btn': !canLogin }"
				@click="handleLogin"
			>
			登录
			</button>
      
			<view class="register-container">
				<text>还没有账号?</text>
				<text class="register-text" @click="navigateToRegister">立即注册</text>
			</view>
      
			<view class="third-party-login" v-if="showThirdPartyLogin">
				<view class="divider">
					<view class="divider-line"></view>
					<text class="divider-text">其他登录方式</text>
					<view class="divider-line"></view>
				</view>
        
				<view class="third-party-icons">
					<view class="icon-item" @click="thirdPartyLogin('wechat')">
						<image class="icon" src="/static/wechat.png"></image>
					</view>
					<view class="icon-item" @click="thirdPartyLogin('qq')">
						<image class="icon" src="/static/qq.png"></image>
					</view>
					<view class="icon-item" @click="thirdPartyLogin('weibo')">
						<image class="icon" src="/static/weibo.png"></image>
					</view>
				</view>
			</view>
		</view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      rememberMe: false,
      showThirdPartyLogin: true, // 根据需求决定是否显示第三方登录
    };
  },
  computed: {
    canLogin() {
      return this.username.trim() !== "" && this.password.trim() !== "";
    },
  },
  onLoad() {
    // 从缓存中读取记住的用户名和密码
    const rememberMe = uni.getStorageSync("rememberMe");
    if (rememberMe) {
      this.rememberMe = true;
      this.username = uni.getStorageSync("username") || "";
      this.password = uni.getStorageSync("password") || "";
    }
  },
  methods: {
    toggleRemember(e) {
      this.rememberMe = e.detail.value.length > 0;
    },

    handleLogin() {
      if (!this.canLogin) return;

      // 显示加载中
      uni.showLoading({
        title: "登录中...",
        mask: true,
      });

      this.http
        .post("/api/admin/login", {
          data: {
            account: this.username,
            password: this.password,
          },
        })
        .then((res) => {
          uni.hideLoading();

          if (res.data.code == 1) {
            uni.setStorageSync("thorui_token", res.data.data.token);

            // 跳转到首页
            uni.reLaunch({
              url: "/pages/researchCenter/researchCenter",
            });

            uni.switchTab({
              url: "/pages/researchCenter/researchCenter",
            });
            uni.showToast({
              title: "登录成功",
              icon: "success",
            });
          } else {
            uni.showToast({
              title: "用户名或密码错误",
              icon: "none",
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: "用户名或密码错误",
            icon: "none",
          });
        });
    },

    navigateToForgot() {
      uni.navigateTo({
        url: "/pages/forgot-password/forgot-password",
      });
    },

    navigateToRegister() {
      uni.navigateTo({
        url: "/pages/register/register",
      });
    },

    thirdPartyLogin(type) {
      uni.showToast({
        title: `使用${type}登录`,
        icon: "none",
      });

      // 这里实现第三方登录逻辑
      // 例如微信登录: uni.login({ provider: 'weixin' })
    },
  },
};
</script>

<style lang="scss">
.remember-me {
  .uni-checkbox-input {
    width: 36rpx !important;
    height: 36rpx !important;
    border-radius: 50%;
  }
}
</style>

<style scoped lang="scss">
.login-container {
  padding: 40rpx 0;
  // flex-direction: column;
	overflow: hidden;
  height: calc(100vh - 80rpx);
  background-color: rgba(235, 239, 244, 1);
  position: relative;
}
.container {
  position: relative;
  z-index: 2;
}
.main-head {
  display: flex;
  flex-direction: column;
  gap: 17rpx;
  padding-top: 170rpx;
  margin: 0 40rpx 25rpx;
  .head-text-one {
    font-weight: normal;
    font-size: 56rpx;
    color: #1c4797;
  }
  .head-text-two {
    font-weight: 500;
    font-size: 38rpx;
    color: #4f73b6;
  }
}
.login-form {
  padding: 60rpx;
  border-radius: 20rpx;
  background: #fff;
  display: flex;
  gap: 40rpx;
  flex-direction: column;
  width: calc(90% - 120rpx);
  margin: 50rpx auto 0;
  .login-form-input {
    border: none;
    border-bottom: 1px solid rgba(223, 225, 233, 1);
    font-weight: 400;
    font-size: 32rpx;
    color: #b0bac8;
    padding-bottom: 18rpx;
  }
  .login-form-ope {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.login-ope {
  width: 90%;
  margin: 68rpx auto 0;
  text-align: center;
  height: 106rpx;
  line-height: 106rpx;
  background: #2e6de3;
  border-radius: 20rpx;
  font-size: 32rpx;
  color: #ffffff;
  text-align: center;
}
.register {
  margin-top: 74rpx;
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 30rpx;
  color: #5c5e71;
  text {
    color: rgba(65, 157, 255, 1);
  }
}
.isAgree {
  width: 630rpx;
  position: fixed;
  bottom: 70rpx;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 400;
  font-size: 28rpx;
  color: #5c5e71;
	text-align: center;
	letter-spacing: 0.5rpx;
  text {
    color: rgba(65, 157, 255, 1);
  }
}
.mainBg {
  background-image: url("/static/images/newIndex/index_bg.png") !important;
  background-size: 100% 100%;
  width: 100%;
  height: 692rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80rpx;
  margin-bottom: 80rpx;
}

.logo {
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
}

.app-name {
  margin-top: 20rpx;
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
}

.form-container {
  width: 100%;
}

.input-group {
  margin-bottom: 40rpx;
}

.input-label {
  display: block;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  font-size: 28rpx;
  border: 1rpx solid #ddd;
}

.input-placeholder {
  color: #ccc;
  font-size: 28rpx;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
  font-size: 26rpx;
}

.remember-me {
  display: flex;
  align-items: center;
  text {
    font-weight: 400;
    font-size: 30rpx;
    color: #5c5e71;
    margin-left: 8rpx;
  }
}

.forgot-password {
  font-weight: 400;
  font-size: 30rpx;
  color: #419dff;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  margin-bottom: 30rpx;
}

.disabled-btn {
  opacity: 0.6;
}

.register-container {
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 60rpx;

  .register-text {
    color: #007aff;
    margin-left: 10rpx;
  }
}

.third-party-login {
  width: 100%;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;

  .divider-line {
    flex: 1;
    height: 1rpx;
    background-color: #ddd;
  }

  .divider-text {
    padding: 0 20rpx;
    color: #999;
    font-size: 26rpx;
  }
}

.third-party-icons {
  display: flex;
  justify-content: center;

  .icon-item {
    margin: 0 30rpx;

    .icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
  }
}
</style>
